<template>
    <div class="sidebar">
      <ul class="menuList">
        <li @click="clickLi">
          <router-link to="/index">
            <span>首页</span>
            <span>&gt;</span>
          </router-link>
        </li>
        <li  @click="clickLi">
          <router-link to="/hotMove">
            <span>影片</span>
            <span>&gt;</span>
          </router-link>
        </li>
        <li  @click="clickLi">
          <router-link to="/">
            <span>影院</span>
            <span>&gt;</span>
          </router-link>
        </li>
        <li  @click="clickLi">
          <router-link to="/login">
            <span>我的</span>
            <span>&gt;</span>
          </router-link>
        </li>
        <li  @click="clickLi">
          <router-link to="/">
            <span>卖座查询</span>
            <span>&gt;</span>
          </router-link>
        </li>
      </ul>
    </div>
</template>
<script>
    import "../scss/animate.css";//这里引用，发下app.vue也可用这个css文件
    export default {
        data() {
            return {}
        },
      methods:{
        clickLi(){
            this.$store.commit("switchSide")
        }
      },
      computed:{
//        inOut(){
//            return this.$store.showSideBar;
//        }
      },
      mounted(){
        var bodyH = document.querySelector("body").clientHeight;
        var navH = document.querySelector("nav").clientHeight
        console.log(bodyH,navH)
        document.querySelector(".sidebar").style.height = bodyH-navH+"px";
        //添加点击事件

      }
    }
</script>
<style type="stylesheet/scss" lang="scss">
  .sidebar{
    width: 85%;
    background: #282828;
    position: fixed;
    top: 50px;
    left: 0px;
    li{
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;
      font-size: 18px;
      border-top: 1px dotted #444;
      border-bottom: 1px dotted #444;
      a{
        &:hover{
          color: firebrick;
        }
        display: block;
        color: #bbb;
        span:nth-of-type(2){
          float: right;
        }
      }
    }
  }

</style>
